<div class="container-fluid" id="app" style="max-width: 1400px;">
        <div class="_header"></div>

        <div class="_content">
            <div class="task-header">
                <div class="text-center">
                    <button type="button" class="btn task-refresh" data-toggle="tooltip" data-placement="bottom" title="需要手动刷新查看任务的最新状态哦" v-on:click="refreshList">刷新进度</button>
                </div>
                <div class="clear"></div>
            </div>

            <div class="task-list layui-form" v-cloak>
                <table id="tasklist" lay-filter="tasklist"></table>
            </div>
        </div>
    </div>
    
    
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="refresh-audio">刷新进度</button>
        </div>
    </script>
    
    <script type="text/html" id="time_format">
        layui.util.toDateString(d.createtime*1000, 'yyyy-MM-dd HH:mm:ss')
    </script>
    <script type="text/html" id="domain_tpl">
        {{#  if(d.build_mode == 1){ }}
        <span class="layui-badge layui-bg-blue">配音</span>
        {{#  } else if (d.build_mode == 2) { }}
        <span class="layui-badge layui-bg-cyan">配音+字幕</span>
        {{#  } }}
    </script>
    <script type="text/html" id="task_status_tpl">
        {{#  if(d.status == 0){ }}
        <span class="layui-badge layui-bg-gray">处理中</span>
        {{#  } else if (d.status == 1) { }}
        <span class="layui-badge layui-bg-green">已完成</span>
        {{#  } }}
    </script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="__CDN__/static/app/api/layui-v2.6.8/layui.js"></script>
    
    
    
    <script>
    var layform , table;

    new Vue({
        el: '#app',
        data: {},
        created:function (){
            let $this = this;
            //加载依赖
            layui.use(["form" , "table"] , function () {
                layform = layui.form;
                table = layui.table;
    
                $this.loadTaskList();
            });
        },
        methods: {
            refreshList: function () {
                table.reload('tasklist', {
                    url: '/api/task/list'
                   ,page: {curr: 1}
                });
                layer.msg("已刷新");
            },
            loadTaskList: function () {
                let $this = this;
    
                //实例化列表
                table.render({
                    elem: '#tasklist'
                    ,url: '/api/task/list'
                    ,page: true
                    ,cols: [[ //表头
                         {type: 'checkbox', fixed: 'left'}
                        ,{field: 'order_no', title: '任务编号',minWidth:120}
                        ,{field: 'name', title: '任务名称',minWidth:100}
                        ,{field: 'voicer', title: '配音员', width:95}
                        ,{field: 'pay_money', title: '消费合计', width:95}
                        ,{title: '任务状态' , templet:'#task_status_tpl',width:185}
                        ,{title: '创建时间', templet: function(d){
                            return layui.util.toDateString(d.createtime*1000, 'yyyy-MM-dd HH:mm:ss')
                        } , width: 200}
                        ,{title: '下载链接', width:140,templet: function(d){
                            if((d.createtime+259200) <= Math.round(new Date() / 1000)){
                                return '<button class="layui-btn layui-btn-xs layui-btn-disabled">链接已过期</button>'
                            }else{
                                return d.status == 1 ? '<a href="'+d.down_url+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal">下载配音</a>' : '<span class="layui-badge layui-bg-green">正在处理</span>'
                            }
                        }}
                    ]]
                    ,limit:10
                    ,limits:[10]
                    ,toolbar: '#toolbar'
                    ,text: {none: '暂无任务'}
                    ,parseData: function(result){
                        return {
                            "code": result.code == 1 ? 0 : 1,
                            "msg": result.msg,
                            "count": result.data.page.totalRows || 0,
                            "data": result.data.data
                        };
                    }
                });
    
                //触发事件
                table.on('toolbar(tasklist)', function(obj){
                    let checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'refresh-audio':
                            $this.refreshList()
                            break;
                    };
                });
            }
        }
    });
    </script>